<%-- 
    Document   : collection
    Created on : Oct 13, 2013, 8:21:10 PM
    Author     : Tùng
--%>


<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link type="text/css" href="css/manage.css" rel="stylesheet">
        <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
        <link type="text/css" href="css/index.css" rel="stylesheet">
        <link type="text/css" href="css/table.css" rel="stylesheet">
        <link type="text/css" href="css/blue.css" rel="stylesheet">

        <script type="text/javascript" src="js/modernizr.min.js"></script>
        <script type="text/javascript" src="js/raphael.js"></script>
        <script type="text/javascript" src="js/popup.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/analytics.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="js/underscore-min.js"></script>
        <script type="text/javascript" src="js/backbone-min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/transition.js"></script>
        <script type="text/javascript" src="js/all.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/6a4ae20ef44d.js"></script>
        <script src="js/table.js" type="text/javascript"></script>


        <title>Collection Page</title>
        <c:if test="${empty sessionScope.ACCOUNT}">
            <c:redirect url="login.jsp"/>
        </c:if>
        <c:if test="${not empty sessionScope.CREATENEWCOL}">
            <script type="text/javascript">
                $(function popuptracking() {
                    $("#dialog-modal").dialog({
                        minHeight: 200,
                        minWidth: 400,
                        modal: true,
                        title: "Create Collection",
                        close: function(){
                            $("#main1").removeClass("ui-widget-overlay ui-front");
                        }
                    });

                    $("#main1").addClass("ui-widget-overlay ui-front");
                });
            </script>
        </c:if>
        <style type="text/css" media="screen">
            #holder {
                height: 250px;
                margin: 50px 0px -50px -415px;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <div id="main1">
            <div id="fixed-header" class="navbar-fixed-top row">
                <div id="menu" class="row">
                    <div id="menu-inner">
                        <div id="messages"></div>
                        <div id="menu-left" class="col-5">
                            <div id="dd-left" class="col-1 text-left">
                                <a data-toggle="dropdown" style="margin-top:20px" class="btn btn-disabled dropdown-toggle"><i class="icon-menu"></i></a>
                                <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                    <li class="caret-up"></li>
                                    <li> <a href="CollectionController?btAction=LoadAllCollection">Collection</a></li>
                                    <li><a href="index.jsp">Search Products</a></li>
                                    <li><a href="ManageProductController?btAction=ShowTrackedProduct">Your Products</a></li>
                                    <li><a href="FeedbackController?btAction=ShowFeedback">Feedback</a></li>
                                    <li>______________________</li>
                                    <li> &nbsp;&nbsp;&nbsp;Member System</li>
                                </ul>
                            </div>
                            <div class="col-2 hiw">
                                <a href="home.jsp">Home</a>
                            </div>
                        </div>
                        <div class="col-2 text-center">
                            <img src="Images/PRTS.png" style="height: 80px"/>
                        </div>
                        <div id="menu-right" class="col-5">
                            <c:if test="${not empty sessionScope.ACCOUNT}">
                                <div id="dd-right">
                                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                        <span id="username-outer">
                                            <span id="username">${sessionScope.ACCOUNT.emailAddress}</span>
                                        </span>
                                        <span class="caret"></span>
                                    </a>
                                    <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                        <li class="caret-up"></li>
                                        <li>
                                            <a id="profile" href="LoginSignup?action=updateAccountDetail">
                                                Account Preferences
                                            </a>
                                        </li>
                                        <c:if test="${sessionScope.ACCOUNT.role.roleID != 3}">
                                            <li>
                                                <a href="AdminController?btAction=LoadPage">Admin System</a>
                                            </li>
                                        </c:if>
                                        <li>
                                            <a id="history" href="MessageController?btAction=LoadReceivedMessage">
                                                Message
                                            </a>
                                        </li>
                                        <li>
                                            <a id="logout" href="HomeController?btAction=logout">
                                                Logout
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pull-right ">
                                    <a href="ManageProductController?btAction=ShowTrackedProduct">My Finds</a>
                                </div>
                            </c:if>
                        </div>
                    </div>
                </div>

                <div id="tools-wrapper" style="width: 100%;">
                    <div class="row" id="sub-menu">
                        <div id="sub-menu-inner">
                        </div>
                    </div>
                    <div id="toolbar" style="width: 100%; ">
                        <div id="toolbar-container">
                            <ul class="nav nav-tabs">
                                <li class="tool-tabs">
                                    <a href="ManageProductController?btAction=ShowTrackedProduct" class="btn-inactive">my&nbsp;products</a>
                                </li>
                                <li class="tool-tabs">
                                    <a href="CollectionController?btAction=LoadAllCollection" class="btn-active">my&nbsp;collection</a>
                                </li>
                            </ul>
                        </div>

                        <div id="filter-tools" class="col-12 visible" style="top: 77px; height: 100px; width: 100%; ">
                            <div id="filter-tools-container">
                                <div id="filter-positioning">

                                    <div class="pull-left sort-icons-container">
                                        <br/>
                                        <br/>
                                        <a href="CollectionController?btAction=createNewCol">Create Collection</a>
                                    </div>
                                    <div class="search browse-tools ">
                                        <form action="ManageProductController" method="POST" class="input-group">
                                            <div class="search-places">
                                                <div title="Now Searching in My Products" class="title">
                                                    <div>Now Searching in:</div>
                                                    <div class="place">My Products</div>
                                                </div>
                                            </div>
                                            <input type="text" value="" placeholder="Search Products by name" name="txtSearchProduct">
                                            <span class="input-group-addon">
                                                <button type="submit" value="SearchProduct" name="btAction"><i class="icon-search"></i></button>
                                            </span>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="content-wrapper" style="margin-top: 35px">
                <div class="row products private-finds">
                    <div class="grid-container" style="width:95%;">
                        <ul class="col-12 grid-view" style="text-align: center;">
                            <br/>
                            <br/>
                            <h3>${CREATECOLSUC} ${EDITCOLSUCCESS}${REMOVEITEMSUC}${DELETECOLSUC}</h3>
                            <h3 style="color: red">${SHOWLCOLDETAILERROR}${EDITCOLERROR}${DELETECOLERROR}${CREATECOLERR}${REMOVEITEMERR}</h3>
                            <br/>
                            <c:if test="${not empty sessionScope.EDITCOLID}">
                                <c:set var="editColID" value="${sessionScope.EDITCOLID}"/>
                                <c:set var="editColName" value="${sessionScope.EDITCOLNAME}"/>
                                <c:set var="editColDes" value="${sessionScope.EDITCOLDES}"/>
                                <form method="POST" action="CollectionController">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th width=1200">
                                                    <input type="hidden" value="${editColID}" name="txtColID"/>
                                                    <input type="text" placeholder="Collection name" value="${editColName}" name="txtEditColName" maxlength="25" required/></th>
                                                <th align="right"><a href="CollectionController?btAction=CloseCol"><img src="Images/close.png" /></a></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><textarea rows="4" placeholder="Description"  name="txtEditColDes" required>${editColDes}</textarea></td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td align="center"> <button name="btAction" type="submit" class="btn-success" value="saveCollection"
                                                                            onclick="if ((txtEditColName.value.length < 3)) {
                                                                                alert('Subject must have length from 3 characters');
                                                                                return false;
                                                                            }
                                                                            ">&nbsp;Save&nbsp;</button>
                                                    <button type="reset" class="btn-success">&nbsp;Clear&nbsp;</button></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </form>
                            </c:if>

                            <br/>
                            <c:if test="${not empty sessionScope.SHOWPRODUCTCOLLECTION}">
                                <table class="table table-hover table-autosort table-autofilter table-autopage:5 table-stripeclass:alternate table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount" >
                                    <thead>
                                        <tr>
                                            <th width="30"></th>
                                            <th></th>
                                            <th class="table-sortable:default">Product Name</th>
                                            <th class="table-sortable:default">Tracked Date</th>
                                            <th class="table-sortable:default">Desired Price</th>
                                            <th width="30"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach var="rows" items="${sessionScope.SHOWPRODUCTCOLLECTION}">
                                            <tr>
                                                <td>
                                                    <img src="${rows.productImage}" width="80" height="80"/>
                                                </td>
                                                <td></td>
                                                <td align="left">&nbsp;<a href="${rows.productLink}">${rows.productName}</a></td>
                                                <td align="left">&nbsp;${rows.trackedDate}</td>
                                                <td align="left">&nbsp;${rows.desiredPrice}</td>
                                                <c:url var="removeItem" value="CollectionController">
                                                    <c:param name="btAction" value="removeItem"/>
                                                    <c:param name="removeCollectionID" value="${rows.trackedProductId}"/>
                                                </c:url>
                                                <td><a href="${removeItem}" onclick="return confirm('Do you want to remove this product from collection?');">Remove</a></td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <c:set var="counts" value="0"/>
                                            <c:forEach var="rows" items="${sessionScope.SHOWPRODUCTCOLLECTION}">
                                                <c:set var="counts" value="${counts + 1}" />
                                            </c:forEach>
                                            <c:set var="collectionname" value="${sessionScope.SHOWCOLLECTIONNAME}"/>
                                            <th colspan="6" align="center">You have ${counts} products in ${collectionname} collection</th>
                                        </tr>
                                        <tr>
                                            <td align="left" class="table-page:first"
                                                style="cursor: pointer;"><img src="Images/first.png" width="20" height="20"/></td>
                                            <td align="left" class="table-page:previous"
                                                style="cursor: pointer;"><img src="Images/previous.png" width="20" height="20"/></td>
                                            <td colspan="2" style="text-align: center;">Page <span
                                                    id="t1page"></span>&nbsp;of <span id="t1pages"></span>
                                            </td>
                                            <td align="right" class="table-page:next"
                                                style="cursor: pointer;"><img src="Images/next.png" width="20" height="20"/></td>
                                            <td align="right" class="table-page:last" style="cursor: pointer;"><img src="Images/last.png" width="20" height="20"/></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </c:if>

                            <c:set var="collectionList" value="${sessionScope.SHOWCOLLECTION}"/>
                            <c:if test="${not empty collectionList}">
                                <table class="table table-hover table-autosort table-autofilter table-autopage:10 table-stripeclass:alternate table-page-number:t2page table-page-count:t2pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount" >
                                    <thead>
                                        <tr>
                                            <c:set var="counts" value="0"/>
                                            <c:forEach var="rows" items="${collectionList}">
                                                <c:set var="counts" value="${counts + 1}" />
                                            </c:forEach>
                                            <th colspan="6" align="center">Total: ${counts} collection(s)</th>
                                        </tr>
                                        <tr>
                                            <th width="30"></th>
                                            <th class="table-sortable:default">Collection</th>
                                            <th class="table-sortable:default">Description</th>
                                            <th class="table-sortable:default">Created Date</th>
                                            <th></th>
                                            <th width="30"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach var="rows" items="${collectionList}">
                                            <tr>
                                                <td></td>
                                                <td align="left">
                                                    <c:url var="showDetail" value="CollectionController">
                                                        <c:param name="btAction" value="showCollectionDetail"/>
                                                        <c:param name="collectionID" value="${rows.collectionID}"/>
                                                    </c:url>
                                                    <a href="${showDetail}">${rows.collectionName}</a> 
                                                </td>
                                                <td><textarea rows="2" readonly>${rows.description}</textarea></td>
                                                <td align="left">&nbsp;${rows.createdDate}</td>
                                                <td>
                                                    <c:url var="editcollection" value="CollectionController">
                                                        <c:param name="btAction" value="editCol"/>
                                                        <c:param name="editColID" value="${rows.collectionID}"/>
                                                        <c:param name="editColName" value="${rows.collectionName}"/>
                                                        <c:param name="editColDes" value="${rows.description}"/>
                                                    </c:url>
                                                    <a href="${editcollection}"><button class="btn-success">Edit</button></a>
                                                </td>
                                                <td>
                                                    <c:url var="delCol" value="CollectionController">
                                                        <c:param name="btAction" value="deleteCollection"/>
                                                        <c:param name="delColID" value="${rows.collectionID}"/>
                                                    </c:url>
                                                    <a href="${delCol}" onclick="return confirm('Delete this collection? All products will become non collection!!!');"><img src="Images/trash.png" /></a>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                    <tfoot>

                                        <tr>
                                            <td align="left" class="table-page:first"
                                                style="cursor: pointer;"><img src="Images/first.png" width="20" height="20"/></td>
                                            <td align="left" class="table-page:previous"
                                                style="cursor: pointer;"><img src="Images/previous.png" width="20" height="20"/></td>
                                            <td colspan="2" style="text-align: center;">Page <span
                                                    id="t2page"></span>&nbsp;of <span id="t2pages"></span>
                                            </td>
                                            <td align="right" class="table-page:next"
                                                style="cursor: pointer;"><img src="Images/next.png" width="20" height="20"/></td>
                                            <td align="right" class="table-page:last" style="cursor: pointer;"><img src="Images/last.png" width="20" height="20"/></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </c:if>
                            <c:if test="${empty collectionList}">
                                <h3 style="color: red">Sorry! You don't have any collection! <a href="CollectionController?btAction=createNewCol">Create collection now</a></h3>
                            </c:if>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div id="dialog-modal" class="row top-inner" style="display: none; min-height: 100px;">
            <c:if test="${not empty sessionScope.CREATENEWCOL}">
                <div class="login-bg">
                    <div class="form">
                        <div class="login-bg">
                            <form class="form-horizontal" id="login-form" method="post" action="CollectionController">
                                <div class="form">
                                    <input type="text" placeholder="Enter new collection name here" name="txtCollectionName" maxlength="25"  required />
                                    <textarea rows="10" placeholder="Description" name="txtCollectionDescription"></textarea>
                                </div>
                                <div id="lower-login" class="row">
                                    <div class="login-signup col-lg-6 col-md-4 col-sm-12 pull-left">
                                        <button name="btAction" type="submit" class="btn btn-primary btn-block" value="CreateCollection"
                                                onclick="if (txtCollectionName.value.length < 3) {
                                                alert('Collection name must have length from 3 characters');
                                                return false;
                                            }
                                                ">Create</button>
                                    </div>
                                    <div class="login-signup col-lg-6 col-md-4 col-sm-12 pull-right">
                                        <button name="action" type="reset" class="btn btn-primary btn-block"
                                                >Clear</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </c:if>
        </div>
        <% session.removeAttribute("CREATENEWCOL");%>
        <% session.removeAttribute("SHOWLCOLDETAILERROR");%>
        <% session.removeAttribute("EDITCOLSUCCESS");%>
        <% session.removeAttribute("EDITCOLERROR");%>
        <% session.removeAttribute("DELETECOLSUC");%>
        <% session.removeAttribute("DELETECOLERROR");%>
        <% session.removeAttribute("CREATECOLSUC");%>
        <% session.removeAttribute("CREATECOLERR");%>
        <% session.removeAttribute("REMOVEITEMSUC");%>
        <% session.removeAttribute("REMOVEITEMERR");%>
    </body>
</html>